<template>
  <span
    v-show="visible"
    class="erp-badge"
    :style="{color: color}"
  >
    <span v-if="!loading">
      {{ maxValue }}
    </span>
    <i
      v-else
      class="el-icon-loading"
    />
  </span>
</template>

<script>
/**
   * element-ui的标记组件[el-badge](https://element.eleme.cn/#/zh-CN/component/badge)
   */
export default {
  name: "ErpBadge",
  props: {
    /**
     * 是否加载中
     * @public
     */
    loading: {
      type: Boolean,
      default: false
    },
    /**
     * 标记中的值
     * @public
     */
    value: {
      type: Number,
      default: 0
    },
    /**
     * 标记的最大值，标记值超过之后会显示
     * @public
     */
    max: {
      type: Number,
      default: 99
    },
    /**
     * 字体颜色
     * @public
     */
    color: {
      type: String,
      default: '#333'
    },
    /**
     * 标记的背景色
     * @public
     */
    bgColor: {
      type: String,
      default: '#fff'
    },
    /**
     * 标记是否可见
     * @public
     */
    visible: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    maxValue () {
      if (this.value > this.max) {
        return this.max + '+';
      }
      return this.value;
    }
  }
};
</script>

<style lang="scss" scoped>
    .erp-badge{
        position: relative;
        top: 6px;
        display: inline-block;
        border-radius: 9px;
        padding: 1px 3px;
        font-size: 12px;
        line-height: 16px;
        height: 16px;
        text-align: center;
        box-sizing: content-box;
        font-weight: 400;
        vertical-align: middle;
        background-color: #ddd;
        min-width: 12px;
    }
</style>
